<template>
  <div class="common-layout">
    <div class="header">
      <headerContainer ref="headerRef" />
    </div>
    <div class="body">
      <template v-if="headerRef?.selectedIndex >= 2">
        <div class="iframe-container">
          <!-- <div class="breadcrumb">
            首页 > {{ getCurrentPath }}
          </div> -->
          <iframe :src="getIframeSrc()" class="content-iframe" frameborder="0" scrolling="auto"
            @load="handleIframeLoad">
          </iframe>
        </div>
      </template>
      <div v-else-if="headerRef && headerRef.selectedIndex <= 1" class="home-container">
        <component :is="headerRef.menuData[headerRef.selectedIndex].routerPath"></component>
      </div>
    </div>
    <div class="footer">
      <footerContainer />
    </div>
    <Transition name="fade">
      <img v-show="top" src="../../assets/image/top.png" alt="回到顶部" class="back-to-top" @click="scrollToTop" />
    </Transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import headerContainer from "../../components/header.vue";
import footerContainer from "../../components/footer.vue";

const top = ref(false);
const headerRef = ref(null);
const iframeLoading = ref(false);

// 获取当前路径名称
const getCurrentPath = computed(() => {
  if (!headerRef.value?.menuData || !headerRef.value?.selectedIndex) return '';
  return headerRef.value.menuData[headerRef.value.selectedIndex]?.name || '';
});

// 获取iframe的src
const getIframeSrc = () => {
  if (!headerRef.value?.menuData || !headerRef.value?.selectedIndex) return '';
  const path = headerRef.value.menuData[headerRef.value.selectedIndex]?.routerPath;
  return path || '';
};

// 处理iframe加载完成
const handleIframeLoad = (event) => {
  iframeLoading.value = false;
  try {
    const iframe = event.target;
    if (iframe) {
      iframe.style.height = '800px';
    }
  } catch (error) {
    console.error('iframe加载错误:', error);
  }
};

// 节流函数
const throttle = (fn, delay) => {
  let timer = null;
  return function () {
    if (timer) return;
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  }
};

// 处理滚动事件
const handleScroll = throttle(() => {
  top.value = window.scrollY > 200;
}, 200);

// 回到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style lang="scss" scoped>
.common-layout {
  width: 100%;
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 219px;
    flex-shrink: 0;
    background-color: #fff;
  }

  .body {
    width: 100%;
    flex: 1;
    background-color: #EAF7FF;

    // 首页内容容器
    .home-container {
      width: 100%;
      min-height: calc(100vh - 395px);
      background-color: #EAF7FF;
    }

    // iframe容器
    .iframe-container {
      width: 70%;
      margin: 0 auto;
      background: #fff;
      margin-top: 20px;
      margin-bottom: 20px;
      min-height: calc(100vh - 435px);

      .breadcrumb {
        padding: 15px 20px;
        font-size: 14px;
        color: #666;
        border-bottom: 1px solid #eee;
      }

      .content-iframe {
        width: 100%;
        min-height: 800px;
        border: none;
        display: block;
      }
    }
  }

  .footer {
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
  }

  .back-to-top {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: opacity 0.3s;
    z-index: 1000;

    &:hover {
      opacity: 0.8;
    }
  }
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 响应式处理
@media screen and (max-width: 1400px) {
  .common-layout {
    .body {
      .iframe-container {
        width: 80%;
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .common-layout {
    .body {
      .iframe-container {
        width: 90%;
      }
    }
  }
}
</style>
